<template>
  <div class="search-wrap">
      <Top :title="title" :showBack="true" :showSearch="false"></Top>
      <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center"  @search="onSearch"  @clear="onCancel"/>
      <div class="content">
          <div class="content-msg" v-if="data.length">
              <van-card
                v-for="item in data"
                :key="item._id"
                :num="item.num"
                :price="item.retailPrice"
                :origin-price="item.originalPrice"
                :title="item.name"
                :thumb="item.img[0].url"
                @click-thumb="goRetail(item._id)"
                >
                <template #tags>
                    <van-tag v-for="(i, index) in item.tag" :key="index" plain type="danger">{{i}}</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" @click="contact">联系我</van-button>
                </template>
            </van-card>
          </div>
          <div class="conent-none" v-show="none"></div>
      </div>
  </div>
</template>

<script>
import Top from '../components/top'
import { getByQuery } from '../utils/api/goods'
export default {
    name: 'search',
    components: {
        Top
    },
    data () {
        return {
            value: '',
            title: '搜索',
            data: [],
            none: false
        }
    },
    methods: {
        async onSearch(value) {
            this.value = value.trim()
            if (this.value) {
                let res = await getByQuery({
                    query: this.value
                })
                this.data = res.data.items
                if (this.data.length === 0) {
                    this.none = true
                } else {
                    this.none = false
                }
            }
        },
        onCancel () {
            this.data = []
            this.none = false
        },
        contact () {
             this.$router.push({
                path: '/addMe'
            })
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #45BE93;
@borderColor: #FAF6EE;
/deep/.van-nav-bar__text,
/deep/ .van-nav-bar .van-icon {
    color: @themeColor;
}
.van-card__title {
          margin-bottom: 6px;
      }
    .van-tag {
          margin-right: 4px;
      }
      .van-card{
          margin-bottom: 10px;
      }
.search-wrap {
    height: 100%;
    .content {
        height: calc(100% - 100px);
    }
}
.conent-none {
    width: 100%;
    height: 100%;
    background: url('../assets/webp.webp') no-repeat center;

}
</style>